<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>vue-scroll basic sample</title>
<style>
html {
  font-size : 36px;
  margin: 0;
  padding: 0; 
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height : 100%;
}

#app {
  height: 80%;
  width: 400px;
  margin: 2rem auto;
  background: rgb(239, 240, 244);
}

#app h5 {
  text-align: left;
  padding: 0 2%;
  margin: 0;
  height: 15%;
  line-height: 2rem;
  border-radius: 5px;
}

#app ol {
  height: 80%;
  list-style: none;
  font-size: .5rem;
  overflow: auto;
  padding: 0 .3rem;
  margin: 0;
  border-radius: 5px;
}

#app ol li {
  background: #fff;
  width: 90%;
  margin: 0 auto;
  padding: 0 5%;
  line-height: 1.5rem;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

#ob {
  font-size: .5rem;
  width: 150px;
  position: fixed;
  right: 50%;
  left: 50%;
  top: 2rem;
  border-radius: 5px;
  padding: .1rem .3rem;
}

</style>
</head>
<body>
<div id="app">
  <h5>Orders</h5>
 	<ol v-scroll="onScroll">
 		<li v-for="msg of msgs" track-by="$index" >{{msg}} - {{$index}}</li>
 	</ol>
  <div id="ob">
    <p>scrollTop:<span>{{position.scrollTop}}</span></p>
  </div>	
</div>

</body>
<script type="text/javascript" src="bundle.js"></script>
</html>